<template>
  <el-dialog
    custom-class="task-detail-info"
    :visible.sync="showElDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div slot="title" class="title">
      <div>候选人基本信息</div>
      <i class="el-icon-close" @click="showElDialog = false"></i>
    </div>
    <div class="task-detail-info-content">
      <el-form
        ref="hrForm"
        :rules="rules"
        :model="form"
        label-position="right"
        label-width="100px"
        class="my-form-group"
      >
        <el-form-item class="form-item" label="候选人姓名" prop="CandidateName">
          <el-input
            v-model="form.CandidateName"
            placeholder="请输入候选人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="英文名" prop="CandidateNameEn">
          <el-input
            v-model="form.CandidateNameEn"
            placeholder="请输入候选人英文名"
          ></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="性别" prop="PARM_SEX">
          <el-select v-model="form.PARM_SEX" placeholder="请选择性别">
            <el-option label="男" value="13"></el-option>
            <el-option label="女" value="14"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" class="form-item" prop="BIRTHDAY">
          <el-date-picker
            v-model="form.BIRTHDAY"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号" class="form-item" prop="IDENTITY_NUM">
          <el-input v-model="form.IDENTITY_NUM"></el-input>
        </el-form-item>
        <el-form-item label="手机号" class="form-item" prop="CandidatePhone">
          <el-input v-model="form.CandidatePhone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" class="form-item" prop="EMAIL">
          <el-input v-model="form.EMAIL"></el-input>
        </el-form-item>
        <el-form-item
          label="报告抄送邮箱"
          class="form-item"
          prop="CandidateEmail"
        >
          <el-input v-model="form.CandidateEmail"></el-input>
        </el-form-item>
        <el-form-item
          label="预计入职时间"
          class="form-item"
          prop="EXPECTEDENTRYTIME"
        >
          <el-date-picker
            v-model="form.EXPECTEDENTRYTIME"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="close-btn" @click="showElDialog = false" size="medium">
        取 消
      </el-button>
      <el-button type="primary" size="medium" @click="submit('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import {
  Required,
  RequiredAndPhone,
  Email,
  FillerFieldRules
} from "@/utils/validateRules.js";
import { SaveCandidate } from "@/api/task/detail.js";
export default {
  components: {},
  data() {
    return {
      showElDialog: false,

      form: {},
      rules: {
        CandidatePhone: RequiredAndPhone,
        ...FillerFieldRules(["EMAIL", "CandidateEmail"], Email),
        ...FillerFieldRules(["CandidateName", "PARM_SEX"], Required)
      }
    };
  },
  created() {},
  methods: {
    //首字母大写为外部可用方法
    ShowInfoDialog() {
      this.form = {};
      this.showElDialog = true;
      this.$nextTick(() => {
        this.$refs["hrForm"].clearValidate();
      });
    },

    submit() {
      this.$refs["hrForm"].validate(valid => {
        if (!valid) {
          this.$message({
            message: "请按照提示正确填写内容！",
            type: "warning"
          });
          return;
        }
        SaveCandidate({ ...this.form, TaskNo: this.$route.query.id })
          .then(() => {
            this.$message("保存成功！");
            this.showElDialog = false;
            this.$emit("editSuccess");
          })
          .catch(() => {});
      });
    }
  }
};
</script>
<style lang="scss">
.task-detail-info {
  width: 890px;
  background-color: #383b55;
  color: #fff;
  .close-btn {
    background-color: #b0bee1;
    border: none;
  }
  .title {
    display: flex;
    justify-content: space-between;
    i {
      cursor: pointer;
    }
  }
  .task-detail-info-content {
    background: #292b3e;
    border-radius: 3px;
    padding: 40px;
  }
}
</style>
